<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <!--<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />-->

    <title>个人资料</title> 
    <!--<link rel="stylesheet" href="css/demo.css">-->
    <link href="css/date.css" rel="stylesheet"/>
    <link rel="stylesheet" href="css/public.css">
   	<link rel="stylesheet" href="css/ydui.css?rev=@@hash">
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/all.css" />
    <link rel="stylesheet" href="css/personal-data.css" />
</head>
<body>
<div class="p-r">
    <div class="heads">
        <span href="javascript:;" onclick="go()"><img src="img/zuojiantou.png" alt="" class="arrows"></span>
        <h1 class="titles">个人资料</h1>
        <div class="certain">确定</div>
    </div>
    <div class="middle">
        <div class="photo flex">
            <div>
                <span>头像</span>
            </div>
            <div class="row">
                <p>
                    <img class="photo-one" src="img/513277.png" alt="" id="personal-profile">
                    <input type="file" accept="image/jpg,image/jpeg,image/png" name="file"   onChange="selectImg(this,'personal-profile')" class="personal-file">
                </p>
                <p>
                    <img src="img/jiantou.png" alt="" class="arrow">
                </p>

            </div>

        </div>
        <div class="nickname">
            <span class="nicknames">昵称</span>
            <input type="text" placeholder="请输入昵称" class="resetUpwd-input" id="personal-name"/>
            <img src="img/jiantou.png" alt="" class="arrow">
        </div>
        
        <div class="nickname">
            <span class="nicknames">性别</span>
            <span class="resetUpwd-input" id="btn1">男</span>
            <img src="img/jiantou.png" alt="" class="arrow">
        </div>
         
        <div class="nickname">
        	
            <span class="nicknames">生日</span>
            
            <!--<span class="resetUpwd-input kbtn" >1996.10.23</span>-->
            <input value="选择生日" id="beginTime" class="resetUpwd-input"/>
            <img src="img/jiantou.png" alt="" class="arrow">
        </div>
        
      <div class="nickname">
            <span class="nicknames">地区</span>
            <input type="text" class="resetUpwd-input" readonly id="J_Address" placeholder="请现在所在地址">
            <img src="img/jiantou.png" alt="" class="arrow">
        </div>
    
        <div>
            <p class="state">个人说明</p>
            <textarea class="describe" placeholder="请输入个人说明" id="personal-motto"></textarea>
        </div>
    </div>
    <!--显示时间-->
    <div id="datePlugin"></div>
    <!--显示性别-->
    <div class="select_box select_box1"></div>
</div>
     
	<script src="js/jquery.js"></script>
	<script src="js/x_rem.js"></script>
	<script src="js/date.js"></script>	
	<script src="js/swiper.js"></script>
	<script src="js/dyselect.js"></script>
	<script src="js/ydui.citys.js"></script>
	<script src="js/ydui.js"></script>
	<script src="js/secondLevel.js"></script>
	<script src="js/all.js"></script>
<script>
	//性别·
	$(function(){
		var hgS1 = new selectSwiper({
			el: '.select_box1',
			data: ['男', '女'],
			init: function(index) {
				if(index !== -1) {
					$('#btn1').html(this.data[index]);
				}
			},
			okFunUndefind: function() {
				alert('必须选择一项');
				return false;
			},
			okFun: function(index) {
				console.log(index);
				$('#btn1').html(this.data[index]);
			},
			closeFun: function() {
				console.log('取消');
			},
		});
		
		$('#btn1').on('click', function() {
			hgS1.openSelectSwiper();
		});
	});
	
	
	
	
	//地区
	!function () {
		var $target = $('#J_Address');
		$target.citySelect();
		$target.on('click', function (event) {
			event.stopPropagation();
			$target.citySelect('open');
		});
		$target.on('done.ydui.cityselect', function (ret) {
			$(this).val(ret.provance + ' ' + ret.city + ' ' + ret.area);
		});
	}();
	
	
	//时间
	$(function(){
		$('#beginTime').date();
		 
	});
	
	
	var nickName = $("#personal-name");   //昵称
	var sax = $("#btn1");     //性别
	var age = $("#beginTime");     //出生年月
 	var address = $("#J_Address");    // 地址
	var motto = $("#personal-motto");   //个人说明
	
	//获取个人信息
	 
		
	function message(){
			$.ajax({
				type:"post",
				url: Url+"/user/getUsers",
				xhrFields:{
					withCredentials:true
				},
				data:{
					
				},
				success:((data)=>{
					console.log(data);
					if(data.portrait != null){     //如果头像不等于空的话
						$("#personal-profile").prop("src",data.portrait);      //就把头像换到页面上去
					}
					
				 	if(data.nickName != null){     //名字
				 		 nickName.val(data.nickName);
				 	}
					
					if(data.age != null){    //生日
						var tt = new Date(data.age).toLocaleString().replace(/\//g, "-");
						tt = tt.split(" ");
						age.val(tt[0]);
						 
					}
					
					if(data.motto != null){   //个人说明
						motto.val(data.motto);
					}
					
					if(data.address != null){
						address.val(data.address);
					}
					
				}),
				error:((err)=>{
					console.log(err);
				})
		});
	 
	}
			
	 message();//调用
	
	
 
	
	
 //换头像
	function selectImg(file,id) {
			 if (!file.files || !file.files[0]){
	            return;
	        }
 
	        var reader = new FileReader();
	        reader.onload = function (evt) {
	           var replaceSrc = evt.target.result;
	            //更换cropper的图片
	           // $('#tailoringImg').cropper('replace', replaceSrc,false);//默认false，适应高度，不失真
				$("#"+id).prop("src",replaceSrc);//显示为图片的形式
  					
  				 
  				 $.ajax({
					type:"post",
					url:Url+"/user/updatePortrait",
					xhrFields:{
						withCredentials:true
					},
					data:{
						im:replaceSrc
					},
					success:((data)=>{
						console.log(data);
						
						popup(data.message);
					}),
					error:((err)=>{
						console.log(err);
					})
				});
  				 
	        }
	        reader.readAsDataURL(file.files[0]);
	       // base64Images.pust();	
 
		}
		
	
 
	
	
	//修改个人信息
	$(".certain").click(()=>{
 		if(nickName.val() == ""){
 			popup("昵称不能为空");
 		}else if(age.val() == ""){
 			popup("出生年月不能为空");
 		}else if(address.val() == ""){
 			popup("所在地区不能为空");
 		}else if(motto.val() == ""){
 			popup("个人说明不能为空");
 		}else{
 			$.ajax({
				type:"post",
				url:Url+"/user/updateUser",
				xhrFields:{
					withCredentials:true
				},
				data:{
					"nickName":nickName.val(),
					"sex":sax.text(),
					"age":new Date(age.val().replace(/-/g,"/")),
					"address":address.val(),
					"motto": motto.val()
				},
				success:((data)=>{
					popup(data.message);
					
				}),
				error:((err)=>{
					console.log(err);
				})
			});
 		}
 
 
 
	
		
		
		
		
	})
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
</script>
</body>
</html>